<template>
  <page-lr class="page-air-quality-ranking">
      <el-form size="small" :model="searchForm" label-width="90px" slot="content-right">
        <el-form-item label="排名范围：">
          <el-button size="small" :type="searchForm.city_type == '全国' ? 'primary' : 'default'" @click="changeCityType('全国')">全国</el-button>
          <el-button size="small" :type="searchForm.city_type == '全省' ? 'primary' : 'default'" @click="changeCityType('全省')">全省</el-button>
        </el-form-item>
        <el-form-item label="统计类型：">
          <el-button v-for="(item,index) in initData.dateList" :key="index" size="small" :type="initData.type == item.id ? 'primary' : 'default'" @click="changeDateType(item.id)">
            {{ item.name }}
          </el-button>
          <my-dateRange v-if="initData.type == 'custom'" :start.sync="initData.start_date" :end.sync="initData.end_date" @change="getList" style="width:100%;" />
          <el-date-picker v-if="initData.type == 'day'" v-model="initData.day" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" @change="changeDate"></el-date-picker>
          <el-date-picker v-if="initData.type == 'month'" v-model="initData.month" type="month" value-format="yyyy-MM" placeholder="选择月份" @change="changeDate"></el-date-picker>
          <el-date-picker v-if="initData.type == 'year'" v-model="initData.year" type="year" value-format="yyyy" placeholder="选择年份" @change="changeDate"></el-date-picker>
        </el-form-item>
      </el-form>
    <div class="list" v-loading="loading" slot="content-left">
      <el-table        
          v-if="!loading"  
          class="tableList"
          :data="list"
          stripe
          border
          :max-height="domHeight + 'px'"
          :show-header="true"
          :row-class-name="tableRowClassName"
          @sort-change="getSortList"
          size="medium"
          style="width: 100%">
          <el-table-column label="排名" type="index" width="80px" align="center">            
            <template slot="header" slot-scope="scope">
              排名
              <div class="td-top">{{ topData.rank }}</div>
            </template>
          </el-table-column>
          <el-table-column label="城市名称" prop="city" align="center">
            <template slot="header" slot-scope="scope">
              城市名称
              <div class="td-top">{{ topData.city }}</div>
            </template>
          </el-table-column>
          <el-table-column label="AQI" prop="aqi" v-if="initData.type == 'day'" sortable  align="center">
            <template slot="header" slot-scope="scope">
              AQI
              <div class="td-top"><span class="tag" :style="{background: getColor(topData.aqi, 'aqi')}">{{ topData.aqi }}</span></div>
            </template>
            <template slot-scope="scope">
              <span class="tag" :style="{background: getColor(scope.row.aqi, 'aqi')}">{{ scope.row.aqi }}</span>
            </template>
          </el-table-column>
          <el-table-column label="综合指数" prop="isum" sortable  align="center">
            <template slot="header" slot-scope="scope">
              综合指数
              <div class="td-top">{{ topData.isum }}</div>
            </template>
          </el-table-column>
          <el-table-column sortable prop="pm10"  align="center">
            <template slot="header" slot-scope="scope">
              PM₁₀<br/>(μg/m³)
              <div class="td-top"><span class="tag" :style="{background: getColor(topData.pm10, 'pm10')}">{{ topData.pm10 }}</span></div>
            </template>
            <template slot-scope="scope">
              <span class="tag" :style="{background: getColor(scope.row.pm10, 'pm10')}">{{ scope.row.pm10 }}</span>
            </template>
          </el-table-column>
          <el-table-column sortable prop="pm25"  align="center">
            <template slot="header" slot-scope="scope">
              PM₂.₅<br/>(μg/m³)
              <div class="td-top"><span class="tag" :style="{background: getColor(topData.pm25, 'pm25')}">{{ topData.pm25 }}</span></div>
            </template>
            <template slot-scope="scope">
              <span class="tag" :style="{background: getColor(scope.row.pm25, 'pm25')}">{{ scope.row.pm25 }}</span>
            </template>
          </el-table-column>
          <el-table-column sortable prop="so2"  align="center">
            <template slot="header" slot-scope="scope">
              SO₂<br/>(μg/m³)
              <div class="td-top"><span class="tag" :style="{background: getColor(topData.so2, 'so2')}">{{ topData.so2 }}</span></div>
            </template>
            <template slot-scope="scope">
              <span class="tag" :style="{background: getColor(scope.row.so2, 'so2')}">{{ scope.row.so2 }}</span>
            </template>
          </el-table-column>
          <el-table-column sortable prop="no2"  align="center">
            <template slot="header" slot-scope="scope">
              NO₂<br/>(μg/m³)
              <div class="td-top"><span class="tag" :style="{background: getColor(topData.no2, 'no2')}">{{ topData.no2 }}</span></div>
            </template>
            <template slot-scope="scope">
              <span class="tag" :style="{background: getColor(scope.row.no2, 'no2')}">{{ scope.row.no2 }}</span>
            </template>
          </el-table-column>
          <el-table-column sortable prop="co"  align="center">
            <template slot="header" slot-scope="scope">
              CO<br/>(mg/m³)
              <div class="td-top"><span class="tag" :style="{background: getColor(topData.co, 'co')}">{{ topData.co }}</span></div>
            </template>
            <template slot-scope="scope">
              <span class="tag" :style="{background: getColor(scope.row.co, 'co')}">{{ scope.row.co }}</span>
            </template>
          </el-table-column>
          <el-table-column sortable prop="o3" align="center">
            <template slot="header" slot-scope="scope">
              O₃_8h<br/>(μg/m³)
              <div class="td-top"><span class="tag" :style="{background: getColor(topData.o3, 'o3_8h')}">{{ topData.o3 }}</span></div>
            </template>
            <template slot-scope="scope">
              <span class="tag" :style="{background: getColor(scope.row.o3, 'o3_8h')}">{{ scope.row.o3 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="primary_pollutant" v-if="initData.type == 'day'" align="center">
            <template slot="header" slot-scope="scope">
              首要污染物
              <div class="td-top">{{ getTypeName(topData.primary_pollutant) }}</div>
            </template>
            <template slot-scope="scope">
              {{getTypeName(scope.row.primary_pollutant)}}
            </template>
          </el-table-column>
        </el-table>
    </div>
  </page-lr>
</template>
<script>
import {city} from '@/config/env';
export default {
  data() {
    return {
      loading: false,
      searchForm:{
        order_by: 'isum',
        city_type: '全省'
      },
      initData:{
        type: 'day',
        day: null,
        month: null,
        year: null,
        start_date: null,
        end_date: null,
        dateList:[
          {id: 'day', name:'日'},
          {id: 'month', name:'月'},
          {id: 'year', name:'年'},
          {id: 'custom', name:'自定义'},
        ]
      },
      list: [],
      listCity: [],
      topData:{},
      domHeight: 500,
      colors : {
        优: 'rgb(0, 228, 0)',
        良: 'rgb(255, 255, 0)',
        轻度污染: 'rgb(255, 126, 0)',
        中度污染: 'rgb(255, 0, 0)',
        重度污染: 'rgb(153, 0, 76)',
        严重污染: 'rgb(126, 0, 35)'
      },
      levels : ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染'],
      levelValues:{
        aqi: [0, 50, 100, 150, 200, 300],
        pm25: [0, 35, 75, 115, 150, 250],
        pm10: [0, 50, 150, 250, 350, 420],
        so2: [0, 50, 150, 475, 800, 1600],
        no2: [0, 40, 80, 180, 280, 565],
        co: [0, 2, 4, 35, 14, 24, 36],
        o3_8h: [0, 100, 160, 215, 265, 800],
      },
      typeList:[
        {id: 'aqi', name: 'AQI', values: [0,50,100,150,200,300]},
        {id: 'pm25', name: 'PM₂.₅', values: [0,35,75,115,150,250]},
        {id: 'pm10', name: 'PM₁₀', values: [0,50,150,250,350,420]},
        {id: 'so2', name: 'SO₂', values: [0,50,150,475,800,1600]},
        {id: 'no2', name: 'NO₂', values: [0,40,80,180,280,565]},
        {id: 'co', name: 'CO', values: [0,2,4,35,14,24]},
        {id: 'o3_8h', name: 'O₃_8h', values: [0,100,160,215,265,800]},
      ]
    }
  },
  created() {
    this.initData.day = this.$moment().add(-1, 'd').format('YYYY-MM-DD');
    this.initData.month = this.$moment().format('YYYY-MM');
    this.initData.year = this.$moment().format('YYYY');
    this.initData.start_date = this.$moment().add(-8, 'd').format('YYYY-MM-DD');
    this.initData.end_date = this.$moment().add(-1, 'd').format('YYYY-MM-DD');
    this.getList();
  },
  mounted(){
    this.domHeight = document.body.clientHeight - 64 - 40 - 48*2 - 20;
  },
  methods: {
    changeDateType(val){
      this.initData.type = val;
      this.getList();
    },
    changeCityType(val){
      this.searchForm.city_type = val;
      this.getList();
    },
    changeDate(val){
      this.initData.type = val;
      this.getList();
    },
    getNowParams(){
      let params = {
        start_date: null,
        end_date: null
      };
      switch(this.initData.type){
        case 'day':
          params.start_date = this.initData.day;
          params.end_date = this.initData.day;
          break;
        case 'month':
          params.start_date= this.$moment(this.initData.month).startOf('months').format('YYYY-MM-DD');
          params.end_date =this.$moment(this.initData.month).endOf('months').format('YYYY-MM-DD');
          break;
        case 'year':
          params.start_date = this.$moment(this.initData.year).startOf('year').format('YYYY-MM-DD');
          params.end_date = this.$moment(this.initData.year).endOf('year').format('YYYY-MM-DD');
          break;
        case 'custom':
          params.start_date = this.initData.start_date;
          params.end_date = this.initData.end_date;
          break;
      };
      return params;
    },
    getList(){
      this.loading = true;
      let params = Object.assign({},this.searchForm, this.getNowParams());
      this.$request('get', '/aqi/city_isum', params, (data,msg) => {
        this.list = data;
        this.getSortList({});
        this.loading = false;
      })
    },
    getSortList({column, prop, order}){
      if(order){
        this.list.sort((a,b) => {
          if(order == 'ascending'){
            return a[prop] - b[prop]
          }else{
            return b[prop] - a[prop];
          }        
        });
      }
      this.list.forEach((item, index) => {
          if(item.city == city){
            let obj = {...item, rank: index+1};
            this.listCity = [obj];
            this.topData = obj;
          }
      });
    },
    tableRowClassName({row,rowIndex}){
      if(row.city == city){
        return 'light';
      }else{
        return ''
      }
    },
    getColor(val,type){
      let data = this.levelValues[type];
      let name = '优';
      if(val <= data[1]){
        name = '优';
      }else if( val > data[1] && val <= data[2]){
        name = '良';
      }else if( val > data[2] && val <= data[3]){
        name = '轻度污染';
      }else if( val > data[3] && val <= data[4]){
        name = '中度污染';
      }else if( val > data[4] && val <= data[5]){
        name = '重度污染';
      }else if( val > data[5]){
        name = '严重污染';
      }
      return this.colors[name];
    },
    getTypeName(val){
      let res = val;
      if(val){
        let arr = val.split(',');
        let str = [];
        arr.forEach(d => {
          let obj = this.typeList.find(item => item.id == d);
          str.push(obj.name);
        });
        res = str.join(',');        
      }
      return res;
      
    }
  }
}
</script>